<template>
	<view>
		<scan></scan>
		<scanner></scanner>
		<sm></sm>
		<honeywell></honeywell>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20" >
			<u-search placeholder="Customer order number/product 69 code to search" :clearabled="true" v-model="keyword" border-color="#606266" @focus="getKeyWordFocus" @custom="search" @search="search" :action-text="'Search'"></u-search>
		</view>
		
		<u-card padding="16" v-for="(item,index) in dataList" :key="index">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="7">
							<view class="u-m-t-5 weikaishi3">
								<span><u-icon name="home" size="30" labelSize="15px" labelColor="#000000"></u-icon>{{item.customerName}}</span>
							</view>
						</u-col>
						<u-col span="5">
							<view class="u-m-t-5 jinxingzhong weikaishi3">
								<span>Status:</span><span>{{item.billstate}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon name="order" size="29" labelSize="14px" labelColor="#000000" label="Order No." color="#000000"></u-icon>: {{item.customerNumber}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon name="calendar" size="29" labelSize="14px" labelColor="#000000" label="Creation Time"></u-icon>: {{item.createTime}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon name="home" size="29" labelSize="14px" labelColor="#000000" label="Warehouse"></u-icon>: {{item.warehouseName}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="12" >
							<view class="weikaishi3">
								<span><u-icon name="clock" size="29" labelSize="14px" labelColor="#000000" label="Total" color="#000000"></u-icon>: {{item.numall}}/{{item.volumeall}}m3</span>
							</view>
						</u-col>
						<u-col span="12" v-if="item.numall == item.realNumall">
							<view class="weikaishi3 yiwancheng">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#00c300" label="Actual In" color="#00c300"></u-icon>: {{item.realNumall}}</span>
							</view>
						</u-col>
						<u-col span="12" v-else>
							<view class="weikaishi3 yizuofei">
								<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#e84d74" label="Actual In" color="#e84d74"></u-icon>: {{item.realNumall}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<u-collapse>
						<u-collapse-item :title="'Category:'+item.goodsNum+' pcs'"></u-collapse-item>
							
							
							
							<!-- <view class=" u-p-r-30 u-p-l-30 u-m-t-20" >
								<u-search placeholder="请输入客户单号搜索" 
								:clearabled="true" 
								v-model="goodsNumber" border-color="#606266" 
								@custom="searchGoods(goodsNumber,item.list)" 
								@search="searchGoods(goodsNumber,item.list)">
								</u-search>
							</view> -->
							<!-- <u-input v-model="goodsNumber" placeholder="商品编码" /> -->
							<!-- <u-input  placeholder="商品编码"  @focus="getFocus(item,item.list)" @confirm="getBlur"/> -->
							
							<u-search placeholder="Product Code" :clearabled="true" @focus="getFocus(item,item.list)" border-color="#606266" @custom="getBlur" @search="getBlur" :action-text="'Search'"></u-search>
							
							<view v-for="(item1,index1) in item.list" :key="index1">
								<u-row >
									<u-col span="12" v-if="item1.singleState == 'NOT_RECEIVED'">
										<view class="weikaishi3">
											<span>{{item1.goodsNumber}},{{item1.goodsname}},{{item1.goodsNo}}</span>
										</view>
									</u-col>
									<u-col span="12" v-if="item1.singleState == 'PENDING_APPROVAL'">
										<view class="yiwancheng weikaishi3">
											<span>{{item1.goodsNumber}},{{item1.goodsname}},{{item1.goodsNo}}</span>
										</view>
									</u-col>
									<u-col span="6">
										<view class="weikaishi6">
											<span>Packing: {{item1.singlePacking}}</span>
										</view>
									</u-col>
									<u-col span="6">
										<view class="weikaishi6">
											<span>Specs: {{item1.goodsSpecs}}</span>
										</view>
									</u-col>
									<u-col span="12">
										<view class="u-line-1 weikaishi4">
											<span><u-icon name="clock" size="29" labelSize="14px" labelColor="#000000" label="Expected In" color="#000000"></u-icon>: {{item1.putNum}}/{{item1.detailedPutvolume}}m3</span>
										</view>
									</u-col>
									<u-col span="12" v-if="item1.putNum == item1.realNum">
										<view class="u-line-1 yiwancheng weikaishi4">
											<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#00c300" label="Actual In" color="#00c300"></u-icon>: {{item1.realNum}}</span>
										</view>
									</u-col>
									<u-col span="12" v-else>
										<view class="u-line-1 yizuofei weikaishi4">
											<span><u-icon name="checkmark-circle" size="29" labelSize="14px" labelColor="#e84d74" label="Actual In" color="#e84d74"></u-icon>: {{item1.realNum}}</span>
										</view>
									</u-col>
									<u-col span="12" text-align="right">
										<view class="u-m-t-10 u-line-1">
											<span><u-button type="default" size="default" @click="toBatch(item1)">Product List</u-button></span>
										</view>
									</u-col>
									<u-col span="12" text-align="right" >
										<view class="u-m-t-30 u-line-1">
										</view>
									</u-col>
								</u-row>
							</view>
					</u-collapse>
				</view>
			</view>
		</u-card>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
	import scan from "@/components/uni-scan/scan.vue"
	import scanner from "@/components/uni-scan/scanner.vue"
	import sm from "@/components/uni-scan/sm.vue"
	import honeywell from "@/components/uni-scan/honeywell.vue"
	export default {
		components: {
			scanner,
			scan,
			sm,
			honeywell
		},
		data() {
			return {
				dataList: [],
				keyword:'',
				keywordflag: false,
				searchdata:{}
			}
		},
		onLoad() {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			this.refresh()
		},
		onShow() {
			uni.$off('scan');
			uni.$on('scan', (res) => {
				console.log('扫码结果1：', res.codeStr);
				if(this.keywordflag){
					this.keyword = res.codeStr;
					this.refresh();
				}else{
					this.goodsNumber = res.codeStr
					this.searchGoods(this.goodsNumber)
				}
			});
		
			uni.$off('scanner') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scanner', (res) => {
				console.log('扫码结果2：', res.code);
				if(this.keywordflag){
					this.keyword = res.code;
					this.refresh();
				}else{
					this.goodsNumber = res.code
					this.searchGoods(this.goodsNumber)
				}
			})
			uni.$off('sm') // 每次进来先 移除全局自定义事件监听器
			uni.$on('sm', (res) => {
				console.log('扫码结果3：', res.code);
				if(this.keywordflag){
					this.keyword = res.code;
					this.refresh();
				}else{
					this.goodsNumber = res.code
					this.searchGoods(this.goodsNumber)
				}
			})
			uni.$off('honeywell') // 每次进来先 移除全局自定义事件监听器
			uni.$on('honeywell', (res) => {
				console.log('扫码结果4：', res.code);
				if(this.keywordflag){
					this.keyword = res.code;
					this.refresh();
				}else{
					this.goodsNumber = res.code
					this.searchGoods(this.goodsNumber)
				}
			})
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			toBatch(e){
				this.$Router.push({ 
					name: 'storage_put_batch',
					params: { storageNumber:e.storageNumber,goodsId:e.goodsId },
				})
			},
			refresh(){
				this.dataList = [];
				uni.showLoading({
					title: 'Loading...'
				})
				this.$http.post('/rest/storagePut/storagelist',{
				},{
					params: {
						customerNumber: this.keyword,
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					// 翻译状态文本
	/* 				.map(item => {
						// 状态文本翻译
						if (item.billstate === '未完成') {
							item.billstate = 'INCOMPLETE';
						} else if (item.billstate === '已完成') {
							item.billstate = 'COMPLETED';
						}
						return item;
					}); */
					this.dataList = res.data.data
				})
				uni.hideLoading()
			},
			search(e){
				this.refresh()
			},
			searchGoods(value){
				let itemList = this.searchdata.list;
				for(let item of itemList) {
					if(item.goodsNumber == value || item.goodsNo == value || item.goodsNo.startsWith(value)){
						this.toBatch(item)
					}
				}
			},
			getFocus(item ,list){
				this.searchdata = item;
				this.keywordflag = false;
			},
			getBlur(value){
				console.log(value);
				let itemList = this.searchdata.list;
				for(let item of itemList) {
					if(item.goodsNumber == value || item.goodsNo == value || item.goodsNo.startsWith(value)){
						this.toBatch(item)
					}
				}
			},
			getKeyWordFocus(){
				this.keywordflag = true;
			}
			
		},
	}
</script>